<%@page import="java.awt.Window"%>
<%@ page import="ilikethat.*"%>
<%@ page import="java.sql.*"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<!-- iOS 1.1.3+: this is the icon that's used when the user adds your app to the home screen -->
<!-- also works on Android! -->
<link rel="apple-touch-icon" href="../images/icon.png" />

<!-- iOS 2.0+: tell iOS not to apply any glare effects to the icon -->
<link rel="apple-touch-icon-precomposed" href="../images/icon.png" />

<!-- iOS 4.2+ icons for different resolutions -->
<link rel="apple-touch-icon" sizes="72x72"
	href="../images/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114"
	href="../images/touch-icon-iphone4.png" />

<!-- iOS 3+: full-screen startup splash screen image (must be 320x460) -->
<link rel="apple-touch-startup-image" href="../images/startup.png">

<!-- enable full-screen mode (only when launched from home screen) -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- controls the appearance of the status bar in full-screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- jQuery einbinden-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<!-- jQuery UI-->
<!-- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> -->

<!-- AJAX -->
<script type="text/javascript" src="../js/ajax.js"></script>

<!-- FB-Data Import -->
<script type="text/javascript" src="../js/fbdata.js"></script>

<title>I Like That</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- CSS einbinden -->
<link rel="stylesheet" href="../css/screen.css"
	media="only screen" type="text/css">
	
<!--iPhone css -->
<link rel="stylesheet" href="../css/handheld-portrait.css"
	media="only screen and (max-width: 580px)" type="text/css"> <!-- media="only screen and (max-device-width: 480px)  and (orientation: landscape)" -->

<link rel="stylesheet" href="../css/handheld-landscape.css"
	media="only screen and (max-width: 790px) and (orientation: landscape)" type="text/css">

<!-- Mobile Einstellung-->
<meta name="viewport"
	content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no" />

<script type="text/javascript">
	$(document).ready(function() {
		$('#login').mouseover(function() {
			$('#hinweis-login').slideDown();
		});
		$('#login').mouseout(function() {
			$('#hinweis-login').slideUp();
		});
	});
</script>
</head>
<body>
<!-- unsichtbarer div für callbackfunktionen -->
	<div id="invisible" style="display: none;"></div>
	<div id="mobile-landscape">
		<div id="mobile-landscape-trans"></div>
		
		<h1 style="position: fixed; width: 50%; margin-left: 25%; z-index: 20000;">Bitte drehen Sie ihr Gerät</h1>
	</div>


	<div id="page">
		<!--------------------------------- Facebook ------------------------------->
		<div id="fb-root"></div>
		<script type="text/javascript">
			// Additional JS functions here
			window.fbAsyncInit = function() {
				FB
						.init({
							appId : '145706808946167', // App ID
							channelUrl : '//ems.informatik.uni-oldenburg.de:1317/i-like-that/html/channel.html', // Channel File
							status : true, // check login status
							cookie : true, // enable cookies to allow the server to access the session
							xfbml : true
						// parse XFBML
						});

				// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
				// for any auth related change, such as login, logout or session refresh. This means that
				// whenever someone who was previously logged out tries to log in again, the correct case below 
				// will be handled. 
				FB.Event
						.subscribe(
								'auth.authResponseChange',
								function(response) {
									// Here we specify what we do with the response anytime this event occurs. 
									if (response.status === 'connected') {
										// The response object is returned with a status field that lets the app know the current
										// login status of the person. In this case, we're handling the situation where they 
										// have logged in to the app.

										//-------------------------------------------------------------------------------
										// Login Button text Anhand des FB statuses ändern
										//-------------------------------------------------------------------------------
										$(document).ready(
												function() {
													$('#hinweis-login').css("background-color", "#E5E4E2");
													$('#hinweis-login').text('');
													$('#login').text('Ausloggen');
												});

										//-------------------------------------------------------------------------------
										// Hier werden die Benutzerdaten ausgelesen und geg. in der DB gespeichert
										//-------------------------------------------------------------------------------
										FbId = response.authResponse.userID;
										localStorage.fbID = FbId;
										
										accessToken = response.authResponse.accessToken;

										FB.api('/me', function(response) {
											name = response.first_name;
											localStorage.name = name;
											$.post('../jsp/login.jsp', {
												FbId : FbId,
												fN : name
											});
										});

										//----------------------------------------------------------------------------------------------------------	
										// quickgame button mit power rangers sound beim click
										//----------------------------------------------------------------------------------------------------------				   
										FB.api('/me', function(response) {
												id = response.id;
											// Knopf geht nur mit Eingeloggtem Facebook
												$('#quickGame').click(function() {
														$.post('../jsp/quickgame.jsp', {
																FbId : id
														},function(data) {
															$('#invisible').html(data);
														});
												});
											});

										//----------------------------------------------------------------------------------------------------------	
										// Button funktion für Profil und Lobby
										//----------------------------------------------------------------------------------------------------------
										$('#profile').click(function() {
											var device = $(window).width();
												// screen
											if(device > 700) {
												$.post('../jsp/profile.jsp', {
													FbId : FbId
												}, function(data) {
													$('#content').html(data);
												});
												return false;
												// mobile 
											} else {
												$.post('../jsp/profile.jsp', {
													FbId : FbId
												}, function(data) {
													$('#content').html(data);
													$('#navi').css('display', 'none');
													$('#content-wrapper').css('display', 'block');
												});
												
												return false;
											}
										});
										$('#lobby').click(function() {
											var device = $(window).width();
											// screen
											if(device > 700) {
														$.post('../jsp/lobby.jsp', {
															FbId : FbId
														}, function(data) {
															$('#content').html(data);
														});
												return false;
												
											// mobile
											} else {
												$.post('../jsp/lobby.jsp', {
													FbId : FbId
												}, function(data) {
													$('#content').html(data);
													$('#navi').css('display', 'none');
													$('#content-wrapper').css('display', 'block');
												});
												return false;
											}
										});

										//-------------------------------------------------------
										//        Schnelles Spiel anzeigen
										//-------------------------------------------------------
										$(document).ready(function() {
											$('#quickGame').show();
										});

										//------------------------------------------------------------------------------- 
									} else if (response.status === 'not_authorized') {
										$(document).ready(function() {
											$('#hinweis-login').show();
										});

										//-------------------------------------------------------
										//        Schnelles Spiel nicht anzeigen
										//-------------------------------------------------------
										$(document).ready(function() {
											$('#quickGame').hide();
										});

										
										// In this case, the person is logged into Facebook, but not into the app, so we call
										// FB.login() to prompt them to do so. 
										// In real-life usage, you wouldn't want to immediately prompt someone to login 
										// like this, for two reasons:
										// (1) JavaScript created popup windows are blocked by most browsers unless they 
										// result from direct user interaction (such as a mouse click)
										// (2) it is a bad experience to be continually prompted to login upon page load.
									} else {
										// In this case, the person is not logged into Facebook, so we call the login() 
										// function to prompt them to do so. Note that at this stage there is no indication
										// of whether they are logged into the app. If they aren't then they'll see the Login
										// dialog right after they log in to Facebook. 
										// The same caveats as above apply to the FB.login() call here.
										$(document).ready(function() {
											$('#login').text('Einloggen');
										});
										

										//-------------------------------------------------------
										//        Schnelles Spiel nicht anzeigen
										//-------------------------------------------------------
										$(document).ready(function() {

											$('#quickGame').hide();
										});
									}
								});
			};

			// Load the SDK asynchronously
			(function(d) {
				var js, id = 'facebook-jssdk', ref = d
						.getElementsByTagName('script')[0];
				if (d.getElementById(id)) {
					return;
				}
				js = d.createElement('script');
				js.id = id;
				js.async = true;
				js.src = "//connect.facebook.net/en_US/all.js";
				ref.parentNode.insertBefore(js, ref);
			}(document));
		</script>

		<!----------------------------------------- Kopfzeile -------------------------------------------->
		<header id="header-wrapper">
			<a href="../jsp/index.jsp"><img id="logo-header"
				src='../images/I_LIKE_THAT_LOGO.png' border="0"></a>

			<!----------------------------------------- Navigation -------------------------------------------->
		
		<!-- Button für mobile -->
		<img id="navi-button" src="../images/I_LIKE_THAT_NAVI-BUTTON.png">
			
		<!-- Navi -->	
		<div id="navi">

				<ul>
					<li class='fb'><a class="left" id="login" href="#">Einloggen</a>
						<!-- divs für Hover Tipps -->
						<div id="hinweis-login"
							style="display: none; margin-top: 10px; width: 143px;">
							<font color="white">Mit Facebook einloggen</font>
						</div></li>
					<li><a class="left" id="profile" href="#Profil">Profil</a></li>
					<li><a class="right" id="lobby" href="#Lobby">Lobby</a></li>
					<li><a class="right" id="help" href="#Hilfe">Hilfe</a>

						<ul class="inner">
							<li class="inner"><a id="kontakt" href="#" title="Kontakt">Kontakt</a></li>
							<li class="inner"><a id="datenschutz" href="#"
								title="Datenschutz">Datenschutz</a></li>
							<li class="inner"><a id="impressum" href="#"
								title="Impressum">Impressum</a></li>
						</ul></li>
				</ul>
			</div>
			
			
		<!-- Script für die Navigations funktionen  -->
			<script type="text/javascript">
				
				var device = $(window).width();
				if(device > 700) {
					$(document).ready(function() {
						$('#login').click(function() {
							var stat = 'Einloggen';
							if ($('#login').text() === stat) {
								FB.login();
								return false;
							} else {
								FB.logout(function() {
										location.reload();
								});
								return false;
							}
						});
						//--------------------------------------------------------------
						// Profil und Lobby sind im Facebook Bereich!
						//--------------------------------------------------------------
						$('#impressum').click(function() {
							$('#content').load('../html/impressum.html');
								return false;
						});
						$('#kontakt').click(function() {
							$('#content').load('../html/kontakt.html');
								return false;
						});
						$('#datenschutz').click(function() {
							$('#content').load('../html/datenschutzbestimmung.html');
								return false;
						});
					});
					
				//---------------------------------------------------------------	
				// 	mobile navifunktionen
				//---------------------------------------------------------------
				} else {
					$(document).ready(function() {
						$('#login').click(function() {
							var stat = 'Einloggen';
							if ($('#login').text() === stat) {
								FB.login();
								$('#navi').css('display', 'none');
								$('#content-wrapper').css('display', 'block');
								return false;
							} else {
								FB.logout(function() {
										location.reload();
								});
								return false;
							}
						});
						//--------------------------------------------------------------
						// Profil und Lobby sind im Facebook Bereich!
						//--------------------------------------------------------------
						$('#impressum').click(function() {
							$('#content').load('../html/impressum.html');
							$('#navi').css('display', 'none');
							$('#content-wrapper').css('display', 'block');
								return false;
						});
						$('#kontakt').click(function() {
							$('#content').load('../html/kontakt.html');
							$('#navi').css('display', 'none');
							$('#content-wrapper').css('display', 'block');
								return false;
						});
						$('#datenschutz').click(function() {
							$('#content').load('../html/datenschutzbestimmung.html');
							$('#navi').css('display', 'none');
							$('#content-wrapper').css('display', 'block');
								return false;
						});
					});
				}
			</script>
		
			<script>
			/*Ausklapp funktion der Navigation*/
			
			/*für mobile*/
			$(document).ready(function() {
				$('#navi-button').click(function() {
					if($('#navi').css('display') === 'block') {
						$('#navi').css('display', 'none');
						$('#content-wrapper').css('display', 'block');
					} else {
						$('#navi').css('display', 'block');
						$('#content-wrapper').css('display', 'none');
					}	
				});
			});
			
			/*slide down für Facebook login*/
			$(document).ready(function() {
				$("#navi li:has(ul)").hover(function() {
					$(this).find("ul").slideDown();
				}, function() {
					$(this).find("ul").hide();
				});
			});
		</script>
		
		</header>

		<!----------------------------------------- Seiteninhalt -------------------------------------------->
		<div id="content-wrapper">

			<div id="content">
				<h1>Was ist I Like That?</h1>
				<b>I Like That</b> gibt die Möglichkeit Bilder in Kategorien zu
				bewerten. Es basiert auf einem Spiel in welchem zwei Spieler
				miteinander spielen können. Ablauf: Der erste Spieler bekommt 4
				Bilder zu einer Kategorie zu sehen (z.B. Sport) und muss diese
				Bilder anhand der Kategorie bewerten. Der zweite Spieler bekommt die
				Möglichkeit, die selben Bilder zu bewerten wie Spieler 1. <br>

				Die Staffelung der Punkte lautet wie folgt: <br> Komplette
				Übereinstimmung : 10 Punkte<br> 1 Punkt Differenz : 5 Punkte<br>
				2 Punkte Differenz : 3 Punkte<br> 3 Punkte Differenz : 2 Punkte<br>
				4 Punkte Differenz : 0 Punkte<br> <br>
				<button id="quickGame" style="display: none;">Schnelles Spiel</button>
			</div>

		</div>
	</div>
</body>
</html>

